<script>
import inputPopup from "@/components/inputPopup/inputPopup.vue"
import { showToast, valIsEmpty } from "@/utils"
export default {
  name: "index",
  props: {
    pickerOptionList: {
      type: Array,
      default() {
        return []
      },
    },
    pickerValueKey: {
      type: String,
      default: "value",
    },
    pickerLabelKey: {
      type: String,
      default: "label",
    },
    value: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    //是否允许搜索
    allowSearch: {
      type: Boolean,
      default: false,
    },
    //是否允许自填
    allowFill: {
      type: Boolean,
      default: false,
    },
    //是否显示确认按钮
    showConfirmBtn: {
      type: Boolean,
      default: false,
    },
    //在没有选中的情况下是否允许点确定
    required: {
      type: Boolean,
      default: false,
    },
  },
  components: { inputPopup },
  methods: {
    valIsEmpty,
    open() {
      this.selectActiveItemValue = this.value
			this.selectActiveItem = this.pickerOptionList.find((item) => item[this.pickerValueKey] + '' === this.value + '')
      this.$refs.popup.open()
      this.$nextTick(() => {
        //如果无选项则直接触发自填输入框
        if (this.pickerOptionList.length === 0) {
          this.$refs.otherInputPopup.open()
        }
      })
    },
    select(item) {
      this.selectActiveItem = item
      this.selectActiveItemValue = item[this.pickerValueKey]
      //如果不显示确认按钮，直接触发确认
      if (!this.showConfirmBtn) {
        this.confirm()
      }
    },
    confirm() {
      if (this.required && (valIsEmpty(this.selectActiveItemValue) || valIsEmpty(this.selectActiveItem))) {
        showToast.default("请至少选择一个选项")
        return
      }
      this.$emit("input", this.selectActiveItemValue)
      this.$emit("change", this.selectActiveItem)
      this.$refs.popup.close()
    },
  },
  computed: {
    filteredOptionList() {
      return this.pickerOptionList.filter((item) => {
        return item[this.pickerLabelKey].toString().includes(this.searchInputContent)
      })
    },
  },
  data() {
    return {
      searchInputContent: "", //搜索框内容
      selectActiveItem: null, //选中的选项
      selectActiveItemValue: "", //选中的选项的值
      otherInputValue: "", //自填输入框内容
    }
  },
  emits: ["change", "input"],
}
</script>

<template>
  <uni-popup
    ref="popup"
    type="bottom"
    :safe-area="false"
    @change="
      (val) => {
        if (!val.show) {
          selectActiveItemValue = ''
          selectActiveItem = null
          otherInputValue = ''
          searchInputContent = ''
        }
      }
    "
  >
    <view class="popup-container">
      <view class="header">
        <view class="placeholder"></view>
        <view class="title">请选择{{ title }}</view>
        <view class="confirm-btn" v-if="showConfirmBtn" @click="confirm">确定</view>
        <view class="placeholder" v-else></view>
      </view>
      <!--			搜索框-->
      <view class="search-container" v-if="allowSearch">
        <view class="search-input">
          <input placeholder="在此输入内容搜索" v-model="searchInputContent" :adjust-position="false" />
        </view>
      </view>
      <!--			选项内容-->
      <view class="picker-container" :class="{ 'show-search': allowSearch }">
        <block v-for="item in filteredOptionList" :key="item[pickerValueKey]">
          <view
            class="picker-item"
            @click="select(item)"
            :class="!valIsEmpty(selectActiveItemValue) && item[pickerValueKey] + '' === selectActiveItemValue + '' ? 'active' : ''"
          >
            {{ item[pickerLabelKey] }}
          </view>
          <view class="divide-line"></view>
        </block>
        <!--				自填-->
        <template v-if="allowFill">
          <view class="picker-item" @click="() => $refs.otherInputPopup.open()">其他</view>
          <view class="divide-line"></view>
          <input-popup
            ref="otherInputPopup"
            v-model="otherInputValue"
            :title="`请输入${title}`"
            placeholder="请输入"
            @submit="
              () => {
                selectActiveItemValue = otherInputValue
                confirm()
              }
            "
            @cancel="() => pickerOptionList.length === 0 && $refs.popup.close()"
          />
        </template>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-container {
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background: white;
  padding-bottom: 30rpx;

  > .header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .title {
      color: var(--text-color);
      font-size: 34rpx;
      text-align: center;
    }

    > .confirm-btn {
      background: var(--theme-color);
      height: 70rpx;
      padding: 0 40rpx;
      border-radius: 35rpx;
      display: flex;
      align-items: center;
      color: var(--text-color-white);
      font-size: 32rpx;
    }

    .placeholder {
      width: 144rpx;
    }
  }

  > .search-container {
    padding: 0 30rpx;
    .search-input {
      background: var(--gray-background-color);
      border-radius: 30rpx;
      padding: 20rpx 30rpx;
      input {
      }
    }
  }

  .picker-container {
    max-height: 60vh;
    overflow: auto;
    padding: 30rpx 0;

    //开启了搜索适配手机的虚拟键盘
    &.show-search {
      height: 60vh;
    }

    .picker-item {
      padding: 30rpx;
      color: var(--text-color);
      &.active {
        background: var(--theme-color-light);
      }
    }

    .divide-line {
      margin: 0 30rpx;
      height: 2rpx;
      background: var(--border-color);
    }
  }
}
</style>
